<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
   	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
   	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
	<title></title>
	<link href="/css/lanai-ui.css" rel="stylesheet" />
	<link href="/plugins/treegrid/bootstrap-table.min.css" rel="stylesheet">
	<link rel="stylesheet" href="/plugins/treegrid/jquery.treegrid.min.css">

</head>
<body>
	<div class="box-body">
		<table id="table"></table> 
		<button onclick="test()">选择</button><br/>
	</div>
	<!-- 第一个弹框--新增 -->
<div class="myModelOne">			
<div class="modal fade" id="myaddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					新增
				</h4>
			</div>
			<div class="modal-body" >
				  <form action="" method="post">
				  	<label for="demo-select">名称</label>
				      <div class="form-group has-feedback">
				      <input type="text" id="deptname" class="form-control" placeholder="请输入部门名称">
				        <span class="fa fa-user form-control-feedback"></span><span id="insertdeptmsg"></span>
				      </div>
				      <div class="form-group has-feedback">
				      <input type="text" id="remark" class="form-control" placeholder="请输入备注信息">
				        <span class="fa fa-user form-control-feedback"></span><span id="insertdeptmsg"></span>
				      </div> 
				</from>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" id="insertcolose" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" onClick="insertDept()">提交</button>
				<input type="hidden" id="editmid" value="0">
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
</div>


	<!-- 第二个弹框--修改 -->
<div class="myModelTwo">			
<div class="modal fade" id="myupdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					修改信息
				</h4>
			</div>
			<div class="modal-body" >
				  <form action="" method="post">
				  	<label for="demo-select">名称</label>
				      <div class="form-group has-feedback">
				      <input type="text" id="menuname" class="form-control" placeholder="请输入名称">
				        <span class="fa fa-user form-control-feedback"></span><span id="insertMenumsg"></span>
				      </div>
				      
				     <div class="form-group has-feedback">
				      <input type="text" id="menuname" class="form-control" placeholder="请输入备注">
				        <span class="fa fa-user form-control-feedback"></span><span id="insertMenumsg"></span>
				      </div>
					
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" id="insertcolose" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" onClick="insertMenu()">提交</button>
				<input type="hidden" id="editmid" value="0">
				<input type="hidden" id="editpid" value="0">
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
</div>

<!-- 第三个弹框--删除 -->
<div class="myModelThree">			
<div class="modal fade" id="mydeleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					确认删除这条信息?
				</h4>
			</div>
			
			<div class="modal-footer">
				<button type="button" class="btn btn-default" id="deletecolose" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" onClick="deleteMenuByMid()">删除</button>
				<input type="hidden" id="editmid" value="0">
				<input type="hidden" id="editpid" value="0">
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
</div>

</body>
<script src="/plugins/treegrid/jquery.min.js"></script>
<script src="/js/lanai-ui.js"></script>
<script src="/plugins/treegrid/bootstrap-table.min.js"></script>
<script src="/plugins/treegrid/bootstrap-table-treegrid.js"></script>
<script src="/plugins/treegrid/jquery.treegrid.min.js"></script>
<script type="text/javascript">
    var $table = $('#table');
    var data = {};

    

    
    function initLoadTreeData(){
    	$.ajax({
    		type:"post",
    		url:"/sys/queryDept",
    		data:{},
    		dataType:"json",
    		success:function(ret){
    			data = ret.data;
    			$table.bootstrapTable('load', data);
    		},
    		error:function(e){
    			alert("e:"+e);
    		}
    	});
    }
    
    $(function() {
    	
        loadTable(data);
        
        initLoadTreeData();
        function loadTable(data){
        	$table.bootstrapTable({
                data:data,
                idField: 'id',
                dataType:'jsonp',
                columns: [
                    { field: 'check',  checkbox: true, formatter: function (value, row, index) {
                            if (row.check == true) {
                               // console.log(row.serverName);
                                //设置选中
                                return {  checked: true };
                            }
                        }
                    },
                    { field: 'deptname',  title: '名称' },
                    { field: 'remark',  title: '备注' },
                    { field: 'operate', title: '操作', align: 'center', events : operateEvents, formatter: 'operateFormatter' },
                ],

                // bootstrap-table-treegrid.js 插件配置 -- start

                //在哪一列展开树形
                treeShowField: 'deptname',
                //指定父id列
                parentIdField: 'pid',
                
                onResetView: function(data) {
                    //console.log('load');
                    $table.treegrid({
                        initialState: 'collapsed',// 所有节点都折叠
                        // initialState: 'expanded',// 所有节点都展开，默认展开
                        treeColumn: 1,
                        // expanderExpandedClass: 'glyphicon glyphicon-minus',  //图标样式
                        // expanderCollapsedClass: 'glyphicon glyphicon-plus',
                        onChange: function() {
                            $table.bootstrapTable('resetWidth');
                        }
                    });

                    //只展开树形的第一级节点
                    $table.treegrid('getRootNodes').treegrid('expand');

                },
                onCheck:function(row){
                    var datas = $table.bootstrapTable('getData');
                    // 勾选子类
                    selectChilds(datas,row,"id","pid",true);

                    // 勾选父类
                    selectParentChecked(datas,row,"id","pid")

                    // 刷新数据
                    $table.bootstrapTable('load', datas);
                },

                onUncheck:function(row){
                    var datas = $table.bootstrapTable('getData');
                    selectChilds(datas,row,"id","pid",false);
                    $table.bootstrapTable('load', datas);
                },
                // bootstrap-table-treetreegrid.js 插件配置 -- end
            });
        }
        
    });
  

    // 格式化按钮
    function operateFormatter(value, row, index) {
        return [
            '<button type="button" class="RoleOfadd btn-small  btn-primary" data-toggle=\"modal\" data-target=\"#myaddModal\" style="margin-right:15px;"><i class="fa fa-plus" ></i>&nbsp;新增</button>',
            '<button type="button" class="RoleOfedit btn-small   btn-primary" data-toggle=\"modal\" data-target=\"#myupdateModal\" style="margin-right:15px;"><i class="fa fa-pencil-square-o" ></i>&nbsp;修改</button>',
            '<button type="button" class="RoleOfdelete btn-small   btn-primary" data-toggle=\"modal\" data-target=\"#mydeleteModal\" style="margin-right:15px;"><i class="fa fa-trash-o" ></i>&nbsp;删除</button>'
        ].join('');

    }
    // 格式化类型
    function typeFormatter(value, row, index) {
        if (value === 'menu') {  return '菜单';  }
        if (value === 'button') {  return '按钮'; }
        if (value === 'api') {  return '接口'; }
        return '-';
    }
     

    //初始化操作按钮的方法
    window.operateEvents = {
        'click .RoleOfadd': function (e, value, row, index) {
            add(row.id,row.deptname);
            $("#editmid").val(row.id);
        },
        'click .RoleOfdelete': function (e, value, row, index) {
            del(row.id);
        },
        'click .RoleOfedit': function (e, value, row, index) {
            update(row.id);
        }
    };
</script>
<script>
    /**
     * 选中父项时，同时选中子项
     * @param datas 所有的数据
     * @param row 当前数据
     * @param id id 字段名
     * @param pid 父id字段名
     */
    function selectChilds(datas,row,id,pid,checked) {
        for(var i in datas){
            if(datas[i][pid] == row[id]){
                datas[i].check=checked;
                selectChilds(datas,datas[i],id,pid,checked);
            };
        }
    }

    function selectParentChecked(datas,row,id,pid){
        for(var i in datas){
            if(datas[i][id] == row[pid]){
                datas[i].check=true;
                selectParentChecked(datas,datas[i],id,pid);
            };
        }
    }

    function test() {
        var selRows = $table.bootstrapTable("getSelections");
        if(selRows.length == 0){
            alert("请至少选择一行");
            return;
        }

        var postData = "";
        $.each(selRows,function(i) {
            postData +=  this.id;
            if (i < selRows.length - 1) {
                postData += "， ";
            }
        });
        alert("你选中行的 id 为："+postData);

    }
    

    //新增部门信息
function insertDept(){
    var deptname = $("#deptname").val();
    if(!deptname){
		$("#insertrolemsg").html("<font color='red'>部门名称不能为空</font>");
		return;
	}
    var pid = $("#editmid").val();
    var remark = $("#remark").val();
    $.ajax({
    	type:"post",
		url:"/sys/insertDept",
		data:{"deptname":deptname,"pid":pid,"remark":remark},
		dataType:"json",
		success:function(ret){
			if(ret.code>0){
				toastr.info("新增成功");
				initLoadTreeData();
				$("#insertcolose").click();			
			}else{
			  alert("新增失败!请稍后再试...");
			}
		},
		error:function(e){
			alert("e:"+e);
		}
    	
    });
}
    
    //修改部门信息
    
    //删除单条部门信息

    function add(id,deptName) {
       // alert("add 方法 , id = " + id+"--"+deptName);
        
    }
    function del(id) {
        //alert("del 方法 , id = " + id);
    }
    function update(id) {
        //alert("update 方法 , id = " + id);
    }


</script>
</html>
